<template>
    <div ref="y_chip" class='y-chip' @click.stop>
        <v-chip variant="outlined" v-for="(item, idx) in chips" :key="idx" :class="item === active ? 'active' : ''"
            @click.stop="() => onclick(item)">{{ item }}
        </v-chip>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref, computed } from 'vue';

const prop = defineProps({
    modelValue: {
        type: Array<any>,
        default: []
    },
    element: {
        type: HTMLElement,
        default: document.body
    }
});

const chips = computed(() => {
    return prop.modelValue.filter(item => item.nav === 1).map(item => item.title);
});

const active = ref(chips.value[0]);
const y_chip = ref<HTMLElement>();
const element = ref<HTMLElement>();

function onclick(key: string) {
    let item = element.value?.querySelector(`#${key}`) as HTMLDivElement;
    // console.log('yzt_________元素11',key);

    const tags = element.value?.querySelector(`.y-chip`);
    // console.log('yzt_________元素',  item!.offsetTop ,item, tags, element.value);

    active.value = key;
    element.value!.scrollTop = item?.offsetTop-tags!.scrollHeight
}
onMounted(() => {
    setTimeout(() => {
        if (y_chip.value?.parentElement !== null)
            element.value = y_chip.value?.parentElement;
    }, 200);
});
</script>

<style lang='less' scoped>
.active {
    color: var(--main) !important;
    border: var(--main) 1px solid !important;
}

.y-chip {
    display: flex;
    align-content: center;
    position: sticky;
    top: 0px;
    background-color: var(--card);
    z-index: 2;
    padding-block: 15px;
    // border: 1px solid red;

    .v-chip {
        width: auto !important;
        height: auto;
        padding-block: 2px;
        font-size: 12px;
        color: var(--color);
        border: var(--border_) 1px solid;
        user-select: none;

        &:not(:first-child) {
            margin-left: 5px;
        }
    }
}
</style>